<template>
  <a-card :bordered="false" class="search-form">
    <a-form :form="form">
      <!-- <form-row label="所属项目" style="padding-bottom: 11px">
        <a-form-item>
          <a-select
            style="max-width: 286px; text-align: left"
            v-decorator="['project']"
            @change="projectChanged"
          >
            <a-select-option
              v-for="item in projectsList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a @click="lookMyself">选择当前默认项目</a>
      </form-row> -->
      <form-row label="所属类别">
        <a-form-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 12 }">
          <a-cascader
            :options="classifyList"
            change-on-select
            @change="onSelect"
          />
        </a-form-item>
      </form-row>
      <form-row label="商品状态">
        <a-row>
          <a-col :span="8">
            <a-form-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 12 }">
              <a-select @change="status" v-decorator="['status']">
                <a-select-option value="1">上架中</a-select-option>
                <a-select-option value="0">已下架</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </form-row>

      <a-button type="primary" @click="submitForm">筛选</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
    </a-form>
  </a-card>
</template>

<script>
import FormRow from './FormRow';
import { mapState } from 'vuex';

export default {
  name: 'SearchForm',
  props: ['projectsList', 'classifyList'],
  components: { FormRow },
  data() {
    return {
      form: this.$form.createForm(this),
      searchObj: {},
      id: 'id' + new Date(),
    };
  },
  methods: {
    status(value) {
      this.searchObj.project_id = this.user.shop_project_id;
      this.searchObj.status = Number(value);
    },
    onSelect(value) {
      this.searchObj.classify_id = value[value.length - 1];
    },
    lookMyself() {
      this.form.setFieldsValue({
        project: this.user.shop_project_id,
      });
      this.projectChanged(this.user.shop_project_id);
    },
    projectChanged(value) {
      this.searchObj.project_id = Number(value);
      this.$emit('getGoodsClassify', value);
    },
    submitForm() {
      // if (!this.searchObj.project_id) {
      //   this.$message.warn('请选择项目');
      //   return;
      // }
      this.$emit('search', this.searchObj);
    },
    resetForm() {
      this.form.resetFields();
      this.searchObj = {};
      this.id = 'id' + new Date();
      this.$emit('reset');
    },
  },
  computed: {
    ...mapState('account', ['user']),
  },
};
</script>

<style lang="less" scoped>
.search-form {
  margin-bottom: 24px;
}
</style>
